<%@page import="org.jeecgframework.web.util.StaticValue"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<head>
<script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="plug-in/tools/curdtools_zh-cn.js"></script>
<script type="text/javascript" src="plug-in/Highcharts-4.2.4/highcharts.js" ></script>
<script type="text/javascript" src="plug-in/easyui/jquery.easyui.min.1.3.2.js"></script>
<script type="text/javascript" src="plug-in/lhgDialog/lhgdialog.min.js"></script>
<link rel="stylesheet" href="plug-in/easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="plug-in/easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="plug-in/tools/css/common.css" type="text/css"></link>
<script>
$(function(){
	initallHightChart();
});
function initallHightChart(){
	var data = getCharData();
	drawTable(data.highCharts);//顺便加载表格
<%--	console.log(data.highChartsDuiDieData);--%>
	$("#highChartContainer_1").highcharts({
		credits: {//去水印
         	text: '',
         	href: ''
     	},
        chart: {
            type: 'column'
        },
        title: {
            text: '巡检进度跟进'
        },
        subtitle: {
            text: '完成比例'
        },
        xAxis: {
            categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        },
        yAxis: {
            title: {
                text: ''
            },
            stackLabels: {
                enabled: true,
                style: {
                	fontWeight : 'normal',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            min: 0,
            tickInterval:1 // 刻度值  
        },
        legend:{enabled:true},
        tooltip: {
			pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
<%--			pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',--%>
            shared: true
        },
        plotOptions: {
            column: {
                borderWidth: 0,
                stacking: 'normal',
        		pointWidth: 22
            }
        },
        series : data.highChartsDuiDieData
    });
	
	var dataArr = new Array();
	$(data.highCharts).each(function(i,item){
		var rowData = calculationRow(item);
		if(i == 0){rowData.name = '计划累计巡检量';}
		if(i == 1){rowData.name = '实际累计巡检量';}
		dataArr.push(rowData);
	});
	$("#highChartContainer_2").highcharts({
		credits: {//去水印
         	text: '',
         	href: ''
     	},
     	title: {
            text: '巡检进度跟进'
        },
        subtitle: {
            text: '完成率趋势'
        },
        xAxis: {
        	categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            min: 0,
            tickInterval:1 // 刻度值  
        },
        series : dataArr
    });
}
function getCharData(){
	var data = {};
	$.ajax({
		url : "zyInspectionReportController.do?queryIpProgressReportData",
		data : {
			"year" : $("#year").val(),
			"departIds" : $("#departId").val(),
			"egId" : $("egId").val()
			},
		cache : false,
		dataType : 'json',
		type : 'POST',
		async : false,
		success : function(result){
			data.highCharts = result.highCharts;
			data.highChartsDuiDieData = result.highChartsDuiDie;
		}
	});
	return data;
}
function drawTable(data){
	$("#tb tr:gt(0)").remove();
	var html = "";
	var rowTotalHtml = "";
	$(data).each(function(i,item_i){
		html += "<tr>";
			html += "<td>"+item_i.name+"</td>";
			$(item_i.data).each(function(j,item_j){
				html += "<td>"+item_j+"</td>";
			});
		html += "</tr>";
		var rowData = calculationRow(item_i);//根据当前行算出对应累加 行的数据
		rowTotalHtml += "<tr>";
		var rCountName = '';
			if(i == 0){rCountName = '计划累计巡检量';}
			if(i == 1){rCountName = '实际累计巡检量';}
			rowTotalHtml += "<td>"+rCountName+"</td>";
			$(rowData.data).each(function(j,item_j){
				rowTotalHtml += "<td>"+item_j+"</td>";
			});
		rowTotalHtml += "</tr>";
	});
	html += rowTotalHtml;
	$("#tb tr:eq(0)").after(html);
}
function calculationRow(data){
	var rowData = {};
	var countArr = new Array();
	for (var i = 0; i < 12; i++) {
		var count = 0;
		for (var j = 0; j < i+1; j++) {
			count += data.data[j];
		}
		countArr.push(count);
	}
	rowData.name = data.name;
	rowData.data = countArr;
	return rowData;
}
function setHighChartData(){
	var data = getCharData();
	var chart = $('#highChartContainer_1').highcharts();
	$(data.highChartsDuiDieData).each(function(i,item){
		chart.series[i].setData(item.data);
	});
	var dataArr = new Array();
	$(data.highCharts).each(function(i,item){
		dataArr.push(calculationRow(item));
	});
	var chart_2 = $('#highChartContainer_2').highcharts();
	$(dataArr).each(function(i,item){
		chart_2.series[i].setData(item.data);
	});
	drawTable(data.highCharts);
}
function searchReport(){
	setHighChartData();
}
function exportReport(){
	var tableData = [];
	$("#tb tr").each(function(r,item_r){
		var rowData = [];
		var cell = "";
		if(r == 0){
			cell = "th";
		}else{
			cell = "td";
		}
		$(item_r).find(cell).each(function(c,item_c){
			rowData.push($(item_c).html());
		});
		tableData.push(rowData);
	});
	var url = "zyInspectionReportController.do?exportIrReport";
	myDownload(url,"tableData="+tableData.join(";")+"&fileName='巡检进度报表.xlsx'");
}
</script>
</head>
<body style="padding: 0px;margin: 0px auto;overflow-x: hidden;">
<div class="report_title">巡检进度报表</div>
<div class="pad_l_10">
	<table width="100%">
		<tr>
			<td>
				<label class="report_label">巡检年度</label>
				<select id="year" style="width:85px;">
					<c:forEach items="${years }" var="item">
						<option value="${item }">${item }&nbsp;年</option>
					</c:forEach>
				</select>
			</td>
			<c:if test="${not empty tpRoleUser && tpRoleUser}" >
				<input id="departId" type="hidden" value="${userDpId}" >
			</c:if>
			<c:if test="${empty tpRoleUser}">
				<td>
					<label class="report_label">机构</label>
					<input id="departId" type="hidden" >
					<input id="departname" readonly="readonly" style="width: 250px;" />
					<t:choose hiddenName="departId" hiddenid="id" inputTextname="departname" textname="shortname"  
						title="机构列表" url="zyInspectionReportController.do?goChooseOrgsForIrReport" name="orgList" width="660px" height="550px"
						icon="icon-search"  isclear="true"></t:choose>
				</td>
			</c:if>
			<td>
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="searchReport()">查询</a>
			</td>
		</tr>
	</table>
	<div style="text-align:right; padding-right:10px;font-size:12px;">
		<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-putout',plain:'true'" onclick="exportReport()">导出报告</a>
	</div>
	<table id="tb" class="report_table" >
		<tr>
			<th>项目</th>
			<th>Jan</th>
			<th>Feb</th>
			<th>Mar</th>
			<th>Apr</th>
			<th>May</th>
			<th>Jun</th>
			<th>Jul</th>
			<th>Aug</th>
			<th>Sep</th>
			<th>Oct</th>
			<th>Nov</th>
			<th>Dec</th>
		</tr>
	</table>
<!-- 	<div id="highChartContainer_1" style="width: 98%;display: inline-block;"></div> -->
	<c:if test="${empty tpRoleUser}">
		<div id="highChartContainer_2" style="width: 98%;display: inline-block;"></div>
	</c:if>
</div>
</body>
